<template>
  <div class="songerdetail" v-if="songermsg.artist">
    <h1>歌手简介</h1>
    <p ref="p" class="active">{{ songermsg.artist.briefDesc }}</p>
    <div v-if="unfold" class="btn" @click="fununfold">
      完整歌手简介<i class="iconfont icon-a-16-23_fuzhi-03"></i>
    </div>
    <div v-if="pack" class="btn" @click="funpack">
      收起<i class="iconfont icon-jiantoushang"></i>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    songermsg: Object,
  },
  data: function () {
    return {
      unfold: false,
      pack: false,
    };
  },
  methods:{
    fununfold:function(){
      this.pack=true;
      this.unfold=false;
      this.$refs.p.setAttribute('class','')
    },
    funpack:function(){
      this.unfold=true;
      this.pack=false
      this.$refs.p.setAttribute('class','active')
    }
  },
  mounted:function(){
     this.$nextTick(function () {
        if(this.$refs.p.offsetHeight>50){
          this.unfold=true
        }
      });
  },
  watch: {
    songermsg: function () {
      this.$nextTick(function () {
        if(this.$refs.p.offsetHeight>50){
          this.unfold=true
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.songerdetail {
  h1 {
    color: rgb(51, 51, 51);
    background-color: rgb(255, 255, 255);
    font-size: 18px;
    padding: 15px;
    font-weight: 700;
  }
  p {
    width: 100vw;
    color: #666;
    &.active {
      display: -webkit-box;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
    }
    padding: 0 10px;
    font-size: 14px;
  }
  .btn {
    width: 100%;
    font-size: 14px;
    color: #666;
    text-align: center;
    margin-top: 25px;
  }
}
</style>